<!-- 此页面代码没用到 -->
<template>
  <div>
    <PageTableX
      ref="configTable"
      action="findConfigPage"
      :columnsFn="columns"
      :initParam="formSearch"
    >
      <Form
        :model="searchForm"
        ref="searchForm"
        slot="search-bar"
        label-position="top"
        class="ivu-form-no-margin-bottom"
        inline
      >
        <Form-item prop="configName" :label="$t('module.configManage.configName')">
          <Input
            type="text"
            maxlength="30"
            v-model="searchForm.configName"
            :placeholder="$t('module.configManage.enterConfigName')"
            @on-enter="search"
          />
        </Form-item>
        <Form-item prop="configCode" :label="$t('module.configManage.configCode')">
          <Input
            type="text"
            maxlength="30"
            v-model="searchForm.configCode"
            :placeholder="$t('module.configManage.enterConfigCode')"
            @on-enter="search"
          />
        </Form-item>
      </Form>
      <div slot="table-bar">
        <RPButton optType="create" @click="add" />
      </div>
      <div slot="handle-bar">
        <RPButton optType="search" @click="search" />
        <RPButton optType="reset" @click="reset" />
      </div>
    </PageTableX>
  </div>
</template>
<script>
import ConfigEdit from "./ConfigEdit.vue";
export default {
  components: {},
  data() {
    const validateVsCode = (rule, value, callback) => {
      if (value === "" || value === undefined || value === null) {
        callback(new Error(this.$t("module.valueSet.enterVsCode")));
      } else if (value.length > 50) {
        callback(new Error(this.$t("module.valueSet.vsCodeLength")));
      } else if (!new RegExp("^[a-zA-z0-9]+$").test(value)) {
        callback(new Error(this.$t("module.valueSet.vsCodeFormat")));
      }
      callback();
    };
    const validateVsName = (rule, value, callback) => {
      if (value === "" || value === undefined || value === null) {
        callback(new Error(this.$t("module.valueSet.enterVsName")));
      } else if (value != value.trim()) {
        callback(new Error(this.$t("module.valueSet.noBlank")));
      } else if (value.length > 200) {
        callback(new Error(this.$t("module.valueSet.vsNameLength")));
      }
      callback();
    };
    return {
      searchForm: {
        parentCode: "",
        configName: "",
        configCode: ""
      }
    };
  },
  computed: {},
  methods: {
    columns() {
      return [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          title: this.$t("module.configManage.configName"),
          key: "configName",
          // sortable: "custom",
          width: 120,
          render: (h, params) => {
            return h(
              "div",
              {
                attrs: {
                  class: "ivu-table-cell ivu-table-cell-ellipsis",
                  title: params.row.configName
                }
              },
              params.row.configName
            );
          }
        },
        {
          title: this.$t("module.configManage.configCode"),
          key: "configCode",
          // sortable: "custom",
          width: 300,
          render: (h, params) => {
            return h(
              "div",
              {
                attrs: {
                  class: "ivu-table-cell ivu-table-cell-ellipsis",
                  title: params.row.configCode
                }
              },
              params.row.configCode
            );
          }
        },
        {
          title: this.$t("module.configManage.configValue"),
          key: "configValue",
          render: (h, params) => {
            return h(
              "div",
              {
                attrs: {
                  class: "ivu-table-cell ivu-table-cell-ellipsis",
                  title: params.row.configValue
                }
              },
              params.row.configValue
            );
          }
        },
        {
          title: this.$t("common.status"),
          align: "left",
          key: "enabled",
          width: 110,
          render: (h, params) => {
            return h(
              "StatusButton",
              {
                props: {
                  status: params.row.enabled == 1 ? "0" : "1"
                }
              },
              params.row.enabled == 1 ? this.$t("common.enable") : this.$t("common.disable")
            );
          }
        },
        {
          title: this.$t("common.operating"),
          align: "left",
          fixed: "right",
          width: 80,
          render: (h, params) => {
            return h("RowTools", {
              props: {
                data: [
                  {
                    type: "icon",
                    icon: "edit",
                    text: this.$t("common.edit"),
                    handle: () => {
                      this.edit(params.row);
                    }
                  },
                  {
                    type: "icon",
                    icon: "trash-a",
                    text: this.$t("common.delete"),
                    handle: () => {
                      this.deleted(params.row.id, params.row.version);
                    }
                  }
                ]
              }
            });
          }
        }
      ];
    },
    search(page) {
      this.$refs["configTable"].load(this.searchForm, page);
    },
    reset() {
      this.$refs["searchForm"].resetFields();
      this.search(1);
    },
    add() {
      new this.$pageModal(
        ConfigEdit,
        {
          props: {
            parentCode: this.searchForm.parentCode
          }
        },
        data => {
          data && this.search();
        }
      );
    },
    edit(config) {
      new this.$pageModal(
        ConfigEdit,
        {
          props: {
            config: config
          }
        },
        data => {
          data && this.search();
        }
      );
    },
    deleted(id, version) {
      new $confirm(this.$t("module.flexField.warning.confirmToDelete"), this).then(() => {
        this.$store.dispatch("deleteConfig", { id, version }).then(response => {
          if (response) {
            this.$message.success({
              content: response.msg || "Delete Success!",
              duration: 3
            });
            this.search();
          } else {
            this.$message.error({
              content: response.msg || "Delete Failed!",
              duration: 3
            });
          }
        });
      });
    }
  },
  watch: {},
  directives: {}
};
</script>
